﻿{% extends base %}

{% block head %}
<style type="text/css">
  .note-header-span {
    line-height: 32px;
  }

  .things {
    padding-left: 20px;
  }

  #loadMore {
    text-align: center;
    width: 100%;
    float: left;
    color: blue;
  }
</style>
{% end %}

{% block body %}

{% init parent_link = None %}
{% init title_link = None %}
{% init type = "ctime" %}
{% init base_path = "/note/timeline" %}
{% init key = "" %}

<script src="/static/lib/vue/vue-2.2.6.min.js"></script>

<div id="app" class="card content">

  <div class="note-header card-title">
    {% if parent_link != None %}
      <a href="{{parent_link.url}}" class="path-link">{{parent_link.name}}</a>&nbsp;/
    {% end %}

    {% if title_link != None %}
      <a href="{{title_link.url}}" class="path-link">{{title_link.name}}</a>
    {% else %}
      <span class="note-header-span">{{title}}</span>
    {% end %}

    <div class="float-right">
        {% if type not in ("search", "public") %}
          {% include note/component/create_option.html %}
        {% end %}

        {% if type == "default" %}
          {% include note/component/group_option.html %}
        {% elif type == "search" %}
          <a class="btn btn-default" href="/search">搜索历史</a>
          <a class="btn btn-default" href="/search?key={{quote(key)}}&category=content">搜索内容</a>
        {% end %}
    </div>
  </div>

  <article class="row" v-for="item in itemList">
    <h3 class="card-title-2">{{!item.title}}</h3>
    <section v-for="file in item.files">
      <span class="point-time point-green"></span>
      <time datetime="">
        <span>{{!item.ctime}}</span>
      </time>
      <aside>
        <p class="things">
          <!-- <input type="checkbox" class="icon-check" v-if="file.type == 'gallery'"/> -->
          <i class="fa" v-bind:class="file.icon"></i>
          <a v-bind:href="file.url">{{!file.name}}</a>
          <span v-if="file.type=='group' || file.type=='system'" class="float-right gray-text">{{!file.size}}</span>
        </p>
        <p class="brief"><span class="text-green"></span></p>
      </aside>
    </section>
  </article>
</div>

<header class="site-footer card">
  <div class="wrapper">
    {% if type != "root" %}
      <a id="loadMore" href="javascript:void(0)">加载更多</a>
    {% end %}
  </div>
</header>

<script type="text/javascript">
  // 全局变量
  var QUERY_LIMIT = 100;

    var itemList = {};
    
    var app = new Vue({
        el: "#app",
        data: {
            itemList: itemList,
            offset: 0
        },
        isLoading: false
    });

    app.itemList = [];
    app.offset = 0;

    function mergeFiles(list, key, files) {
      for (var i = 0; i < list.length; i++) {
        var item = list[i];
        if (item.title == key) {
          item.files = item.files.concat(files);
          return;
        }
      }
      list.push({title: key, files: files});
    }

    /** 加载更多笔记
     * @param {boolean} showToast 是否展示toast信息
     */
    function loadMore(showToast) {
      if (app.isLoading) {
        return;
      }
      var type = "{{type}}" || getUrlParam("type");
      var parent_id = getUrlParam("parent_id");
      var searchKey = "{{quote(key)}}";
      var loadingNoteIndex;
      layer.ready(function(){
        // 等待layer的资源加载完再显示，不然样式会漂移
        loadingNoteIndex = layer.load(2);
      }); 

      app.isLoading = true;
      $.get("/note/api/timeline?_type=json&type=" + type, 
        { 
          offset: app.offset,
          limit : QUERY_LIMIT,
          parent_id: parent_id,
          key: searchKey
        }, 
        function (resp, status) {
          app.isLoading = false;
          layer.close(loadingNoteIndex);
          var data = resp.data;
          if (data.length == 0) {
            // alert("没有更多了");
            if (showToast) {
              layer.msg("没有更多了");
            }
            return;
          }
          var resp = data;
          // app.itemList = [];
          var count = 0;
          for (var i = 0; i < data.length; i++) {
            // console.log(key, resp[key]);
            var item  = data[i];
            var files = item.children;
            var title = item.title;
            app.offset += files.length;
            mergeFiles(app.itemList, title, files);
            count++;
            // app.itemList.push({title: key, files: files});
          }
          if (count == 0) {
            // alert("没有更多了");
            if (showToast) {
              layer.msg("没有更多了");
            }
            return;
          }
      }).fail(function (error) {
          app.isLoading = false;
          layer.close(loadingNoteIndex);
      });
    }


    $("#loadMore").on("click", function() {
      loadMore(true);
    })

    layer.ready(function () {
      // 等待layer资源加载
      loadMore(false);
    });

    //滚动加载
    /**
    $(".x-body").scroll(function() {
      var scrollTop = $(".x-body").scrollTop();
      var scrollHeight = $("#app").height();
      var windowHeight = $(window).height();
      console.log(scrollTop, windowHeight, scrollTop + windowHeight, scrollHeight);
      if (scrollTop + windowHeight >= scrollHeight + 100) {
        loadMore(true);
      }
    });*/

</script>
{% end %}

{% block aside %}
  {% include note/component/mod_aside.html %}
{% end %}
